<template>
  <div class="hello">


<h2>单选框</h2>
<p>{{radio}}</p>
 <el-radio v-model="radio" label="0">备选项</el-radio>
  <el-radio v-model="radio" label="1">备选项</el-radio>
   <el-radio disabled v-model="radio" label="2">备选项</el-radio>
  <el-radio v-model="radio" label="3">备选项</el-radio>
    <el-container>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="4">
          	<div class="dh">左侧导航栏</div>
          </el-col>
          <el-col :span="11">
            <div class="lb">轮播图</div>
            <div class="lb2">轮播图2</div>
          </el-col>
          <el-col :span="3">
            <div class="gg">广告位</div>
            <div class="gg2">广告位2</div>
          </el-col>
          <el-col :span="6">
            <div class="hi">Hi!你好</div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    
    
    <h2>按钮 disabled</h2>
   
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      bool: true,
      radio:'1'
    };
  },
  methods: {
    btn() {
      alert("注册成功");
    },
    btn2() {
      this.bool = !this.bool;
    },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dh,.lb,.lb2,.gg,.gg2,.hi{
  background:thistle;
  color: tomato;
}
.dh {
  height: 500px;
}
.lb {
  height: 290px;
  margin-bottom: 10px;
}
.lb2 {
  height: 200px;
}
.gg{
  height: 290px;
   margin-bottom: 10px;
}
.gg2{
  height: 200px;
}
.hi{
  height: 500px;
}
.span {
  background: red;
  color: #fff;
}
</style>
